import React, { Component } from 'react';
import {
  StyleSheet, View, Text, ScrollView,
  Image, Dimensions, TouchableOpacity
} from "react-native";
import { style } from '../../../../../theme/style';
import { Common } from '../../../../../component/common/Common';
import { CreateMaintenance } from './_component/CreateMaintenance';
import { TotalMaintenance } from './_component/TotalMaintenance';
import { API, API_GENERATE } from '../../../../../config/api';
import HTTP from '../../../../../utils/http';

const ScreenWidth = Dimensions.get('window').width;
const ScreenHeight = Dimensions.get('window').height;
const scale = ScreenWidth / 375;

export class NewMaintenance extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: '新增维护',
      headerTintColor: style.color.white,
      headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
      headerRight: (<Image style={{ marginLeft: 18 * scale, width: 9 * scale, height: 16 * scale }} source={require('../../../../../imgs/goBackEmpty.png')} />),
      headerStyle: {
        elevation: 0,
        backgroundColor: style.color.themeColor,
      },
      headerTitleStyle: {
        flex: 1,
        textAlign: 'center'
      }
    }
  }

  constructor(props) {
    super(props);
    this.state = {
      tabIndex: 0,
      visitCntObj: {}
    }
    this.tabData = [
      { title: '创建维护' },
      { title: '维护总次数' }
    ]

    this.ortherData = this.props.navigation.state.params.ortherData || [];
    this.choice = this.props.navigation.state.params.choice || {};
    this.visitParams = {
      companyId: this.ortherData.companyInfoVO.companyId,
      onlyMe: false,
      beginDate: '',
      endDate: ''
    }
  }

  componentWillMount () {
    this._getVisitCnt(this.visitParams);
  }

  _getVisitCnt = async (params) => {
    const visitCntObj = await HTTP.POST(API_GENERATE(API.GET_STAFF_CNT), params);
    this.setState({ visitCntObj });
  }

  // tab切换
  _tabFn = tabIndex => { this.setState({ tabIndex }) }

  render () {
    let { tabIndex, visitCntObj } = this.state;
    let { addressCodeParam } = this.props.navigation.state.params;
    return (
      <View>
        <View style={[styles.tabBox, styles.flexRow]}>
          {
            this.tabData.map((item, index) => {
              return (
                <TouchableOpacity key={index} onPress={() => { this._tabFn(index) }} style={styles.tab}>
                  <View style={[styles.tabTextBox, tabIndex == index ? styles.tabTextBoxActive : null]}>
                    <Text style={[styles.tabText, tabIndex == index ? styles.tabTextActive : null]}>{item.title}</Text>
                    {index ? <Text style={styles.tabText}>{visitCntObj.totalCnt || 0}</Text> : null}
                  </View>
                </TouchableOpacity>
              )
            })
          }
        </View>
        <ScrollView>
          {tabIndex == 0 ? <CreateMaintenance choice={this.choice} data={this.ortherData} addressCodeParam={addressCodeParam} /> : null}
          {tabIndex == 1 ? <TotalMaintenance visitCntObj={visitCntObj} params={this.visitParams} /> : null}
        </ScrollView>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  flexRow: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  tabBox: {
    height: 70 * scale,
    backgroundColor: '#F4F7FE',
  },
  tab: {
    flex: 1,
  },
  tabTextBox: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 40 * scale,
    marginLeft: 40 * scale,
    paddingBottom: 8 * scale
  },
  tabTextBoxActive: {
    borderBottomWidth: 1,
    borderBottomColor: '#000',
  },
  tabTextActive: {
    fontWeight: '600',
    fontFamily: 'PingFangSC-Semibold'
  },
  tabText: {
    textAlign: 'center',
    fontSize: 14 * scale,
  }
})